<template>
  <div class="min-h-screen bg-gray-100 py-8">
    <div class="max-w-4xl mx-auto px-4">
      <h1 class="text-3xl font-bold text-gray-800 mb-8">用户调试信息</h1>
      
      <!-- 当前登录状态 -->
      <div class="bg-white rounded-lg shadow-md p-6 mb-6">
        <h2 class="text-xl font-semibold text-gray-700 mb-4">登录状态</h2>
        <div v-if="authStore.isAuthenticated" class="space-y-2">
          <p><span class="font-medium">登录状态:</span> <span class="text-green-600">已登录</span></p>
          <p><span class="font-medium">用户名:</span> {{ authStore.user?.username }}</p>
          <p><span class="font-medium">邮箱:</span> {{ authStore.user?.email }}</p>
          <p><span class="font-medium">姓名:</span> {{ authStore.user?.first_name }} {{ authStore.user?.last_name }}</p>
          <p><span class="font-medium">管理员权限:</span> 
            <span :class="authStore.user?.is_staff ? 'text-green-600' : 'text-red-600'">
              {{ authStore.user?.is_staff ? '是' : '否' }}
            </span>
          </p>
          <p><span class="font-medium">Token:</span> {{ authStore.token?.substring(0, 30) }}...</p>
        </div>
        <div v-else class="text-red-600">
          <p>用户未登录</p>
        </div>
      </div>
      
      <!-- 用户对象详情 -->
      <div class="bg-white rounded-lg shadow-md p-6 mb-6">
        <h2 class="text-xl font-semibold text-gray-700 mb-4">用户对象详情</h2>
        <pre class="bg-gray-100 p-4 rounded text-sm overflow-auto">{{ JSON.stringify(authStore.user, null, 2) }}</pre>
      </div>
      
      <!-- 本地存储信息 -->
      <div class="bg-white rounded-lg shadow-md p-6 mb-6">
        <h2 class="text-xl font-semibold text-gray-700 mb-4">本地存储信息</h2>
        <div class="space-y-2">
          <p><span class="font-medium">Token:</span> {{ localToken?.substring(0, 30) }}...</p>
          <p><span class="font-medium">用户信息:</span></p>
          <pre class="bg-gray-100 p-4 rounded text-sm overflow-auto">{{ localUser }}</pre>
        </div>
      </div>
      
      <!-- 操作按钮 -->
      <div class="bg-white rounded-lg shadow-md p-6">
        <h2 class="text-xl font-semibold text-gray-700 mb-4">操作</h2>
        <div class="space-x-4">
          <button 
            @click="refreshUserInfo" 
            class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded transition-colors"
            :disabled="!authStore.isAuthenticated"
          >
            刷新用户信息
          </button>
          <button 
            @click="logout" 
            class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded transition-colors"
            :disabled="!authStore.isAuthenticated"
          >
            退出登录
          </button>
          <router-link 
            to="/login" 
            class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded transition-colors inline-block"
          >
            去登录页面
          </router-link>
          <router-link 
            v-if="authStore.user?.is_staff" 
            to="/admin" 
            class="bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded transition-colors inline-block"
          >
            进入后台管理
          </router-link>
        </div>
      </div>
      
      <!-- 提示信息 -->
      <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mt-6">
        <h3 class="text-lg font-medium text-yellow-800 mb-2">使用说明</h3>
        <ul class="text-yellow-700 space-y-1">
          <li>• 如果管理员权限显示"否"，请点击"刷新用户信息"按钮</li>
          <li>• 如果刷新后仍然显示"否"，请退出登录后重新使用管理员账号登录</li>
          <li>• 管理员账号：admin 或 root</li>
          <li>• 只有管理员权限为"是"时，导航栏才会显示"后台管理"链接</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useAuthStore } from '@/stores/auth'
import { useRouter } from 'vue-router'
import { authAPI } from '@/services/api'
import { ref, computed } from 'vue'

const authStore = useAuthStore()
const router = useRouter()
const message = ref('')

// 计算属性获取本地存储数据
const localToken = computed(() => {
  if (typeof window !== 'undefined') {
    return localStorage.getItem('token')
  }
  return null
})

const localUser = computed(() => {
  if (typeof window !== 'undefined') {
    return localStorage.getItem('user')
  }
  return null
})

const refreshUserInfo = async () => {
  try {
    const response = await authAPI.getCurrentUser()
    authStore.user = response.data
    localStorage.setItem('user', JSON.stringify(response.data))
    message.value = '用户信息已刷新'
    setTimeout(() => message.value = '', 3000)
  } catch (error) {
    // console.error('刷新用户信息失败:', error)
    message.value = '刷新失败，请重新登录'
    setTimeout(() => message.value = '', 3000)
  }
}

const logout = async () => {
  await authStore.logout()
  router.push('/login')
}
</script>